<template>
  <div id="app" class="app iconfont">
    <v-header :seller="seller"></v-header>
    <div class="tabs">
      <router-link exact-active-class="active" class="tabitem" to="goods">商品</router-link>
      <router-link exact-active-class="active" class="tabitem" to="ratings">评价</router-link>
      <router-link exact-active-class="active" class="tabitem" to="sellers">商家</router-link>
      <router-link exact-active-class="active" class="tabitem" to="test">测试</router-link>
    </div>
    <div class="view">
      <router-view/>
    </div>
  </div>
</template>

<script>
  import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
  import header from './components/header'
export default {
    components:{'v-header': header},

    data:function () {
      return {
      }
    },
    computed: {
      ...mapGetters(['seller'])
    },
}
</script>

<style src="./assets/scss/index.scss" lang="scss"></style>
<style lang="scss" scoped="">
  @import "./assets/scss/mixin.scss";
  .app{
    font-size: 0;
    line-height: 0;
    color: #000;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .tabs{
      width: 100%;
      text-align: center;
      @include border-1px(rgba(7,17,27,0.1));

      .tabitem{
        /*width: 33.33333%;*/
        width: 25%;
        height: 40px;
        display: inline-block;

        font-size: 14px;
        line-height: 40px;
        color: #4d555d;
      }

      .active{
        color: #f01414;
      }
    }
    .view{
      position: absolute;
      top: 170px;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
</style>
